<html>

<head>
    <meta charset="utf8">
    <title>lite_js_test</title>
    <script src="Lite.js" type="text/javascript"></script>
</head>

<body>
    <nav>
        <h1>my lite js test</h1>
    </nav>
    <div id="div01">
        <form action="">
            <input type="text" e-model="input" /><br>
            <input type="submit" value="submit"><br>
        </form>
        <div id="div03">
            <p>p is
                <%p%> now</p>
        </div>
        <button class="white" e-click="chngClz"><%btn%></button>
    </div>
    <div id="div02">
        <p>
            <%p%>
        </p>
    </div>
    <footer>
        <br><br>
        <p>生成第一个导航:</p>
        <div id='page'></div>
        <br><br>
        <p>生成第二个导航:</p>
        <div id='page2'></div>
    </footer>

    <script>
        elite.use(["http", "core", "spagination", "move", "UI"], callback);
        function callback() {
            var edao = new EDAO("user");
            var user3 = {
                "id": 3, "name": "carter", "age": 25
            };
            edao.create(user3);
            user3["age"] = 27;
            edao.update(user3);
            var em1 = new ECtrl({
                view: "#div01",
                data: {
                    "p": edao.read(3)["age"],
                    "input": edao.read(3)["name"],
                    "btn": edao.read(3)["id"]
                },
                methods: {
                    "chngClz": function (ele, event) {
                        ele.className = "black" || "white";
                    }
                }
            });
            var em2 = em1.extend({
                view: "#div02",
                data: {
                    "p": "p is another now"
                },
            });
            console.info(em1, em2);
            setTimeout(function () {
                em1["p"] = "30";
                em2["p"] = "ppp";
            }, 1000);
        }
    </script>
</body>

</html>